<style>
    .ui-main > .el-divider .el-divider__text {
        background: #F2F2F2;
    }

    .ui-main > h3 {
        padding-left: 20px;
        font-size: 20px;
        border-left: 2px solid #409EFF;
        margin-left: 10px;
    }
</style>
<template>
    <ly-page>
        <ly-navi type="title" title="搜索区"></ly-navi>
        <el-divider content-position="left">功能区说明</el-divider>
        <img src="/portal/imgs/filter-tab-box.jpg" style="width: 100%;padding: 10px;">
        <h3 style="padding: 0 15px;">ly-page-content 同级</h3>
        <el-divider content-position="left">默认</el-divider>
        <ly-table-filter bottom @search="store.load(1)" @reset="store.reset()" @add="add">
            <template slot="top">
                <!-- 筛选tab -->
                <el-radio-group v-model="store.params.list_type" @change="listTypeChange">
                    <el-radio-button :label="0">全部客户</el-radio-button>
                    <el-radio-button :label="1">联系中的客户</el-radio-button>
                    <el-radio-button :label="2">今日跟进过</el-radio-button>
                    <el-radio-button :label="3">待跟进</el-radio-button>
                    <el-radio-button :label="5">即将到期</el-radio-button>
                    <el-radio-button :label="13">即将释放</el-radio-button>
                </el-radio-group>
            </template>
            <el-form-item label="">
                <el-radio-group v-model="store.params.radio1">
                    <el-radio-button label="上海"></el-radio-button>
                    <el-radio-button label="北京"></el-radio-button>
                    <el-radio-button label="广州"></el-radio-button>
                    <el-radio-button label="深圳"></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="">
                <el-radio-group v-model="store.params.radio1">
                    <el-radio-button label="上海"></el-radio-button>
                    <el-radio-button label="北京"></el-radio-button>
                    <el-radio-button label="广州"></el-radio-button>
                    <el-radio-button label="深圳"></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="">
                <el-select v-model="store.params.course_status" placeholder="课程状态">
                    <el-option key="1" label="未结束" value="1"></el-option>
                    <el-option key="2" label="已结束" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-select v-model="store.params.course_status" placeholder="课程状态">
                    <el-option key="1" label="未结束" value="1"></el-option>
                    <el-option key="2" label="已结束" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-select v-model="store.params.course_status" placeholder="课程状态">
                    <el-option key="1" label="未结束" value="1"></el-option>
                    <el-option key="2" label="已结束" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-select v-model="store.params.course_status" placeholder="课程状态">
                    <el-option key="1" label="未结束" value="1"></el-option>
                    <el-option key="2" label="已结束" value="2"></el-option>
                </el-select>
            </el-form-item>
            <template slot="extra">
                <el-button size="small">导出</el-button>
                <el-button type="text" size="small">导出历史</el-button>
            </template>
            <template slot="actions">
                <el-button size="small">更多按钮</el-button>
            </template>
        </ly-table-filter>


        <h3 style="padding: 0 15px;">ly-page-content 内部</h3>
        <ly-page-content>
            <ly-table-filter @search="store.load(1)" @add="add">
                <el-form-item>
                    <el-select v-model="store.params.status" placeholder="全部/未处理/已处理">
                        <el-option key="1" label="全部" value="1"></el-option>
                        <el-option key="2" label="未处理" value="2"></el-option>
                        <el-option key="3" label="已处理" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="store.params.course_status" placeholder="课程状态">
                        <el-option key="1" label="未结束" value="1"></el-option>
                        <el-option key="2" label="已结束" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </ly-table-filter>
            <el-divider content-position="left">带背景</el-divider>
            <ly-table-filter background @search="store.load(1)" @reset="store.reset()" @add="add">
                <el-form-item label="状态">
                    <el-select v-model="store.params.status" placeholder="全部/未处理/已处理">
                        <el-option key="1" label="全部" value="1"></el-option>
                        <el-option key="2" label="未处理" value="2"></el-option>
                        <el-option key="3" label="已处理" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="store.params.course_status" placeholder="状态">
                        <el-option key="1" label="未结束" value="1"></el-option>
                        <el-option key="2" label="已结束" value="2"></el-option>
                    </el-select>
                    <el-input  v-model="store.params.text" ></el-input>
                </el-form-item>
                <el-form-item label="课程">
                    <el-select v-model="store.params.course_status" placeholder="课程状态">
                        <el-option key="1" label="未结束" value="1"></el-option>
                        <el-option key="2" label="已结束" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教师">
                    <el-select v-model="store.params.course_status" placeholder="课程状态">
                        <el-option key="1" label="未结束" value="1"></el-option>
                        <el-option key="2" label="已结束" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学员">
                    <el-select v-model="store.params.course_status" placeholder="课程状态">
                        <el-option key="1" label="未结束" value="1"></el-option>
                        <el-option key="2" label="已结束" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </ly-table-filter>

            <ly-code-view>
             <pre v-pre>
 <ly-table-filter  v-on:search="store.load(1)" v-on:reset="store.reset()" v-on:add="add">
            <templ slot="top">
                <!-- 筛选tab -->
                <el-radio-group v-model="store.params.list_type" v-ok:change="listTypeChange">
                    <el-radio-button :label="0">全部客户</el-radio-button>
                    <el-radio-button :label="1">联系中的客户</el-radio-button>
                    <el-radio-button :label="2">今日跟进过</el-radio-button>
                    <el-radio-button :label="3">待跟进</el-radio-button>
                    <el-radio-button :label="5">即将到期</el-radio-button>
                    <el-radio-button :label="13">即将释放</el-radio-button>
                </el-radio-group>
            </templ>

            <el-form-item label="课程状态">

                <el-radio-group v-model="store.params.radio1">
                    <el-radio-button label="上海"></el-radio-button>
                    <el-radio-button label="北京"></el-radio-button>
                    <el-radio-button label="广州"></el-radio-button>
                    <el-radio-button label="深圳"></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="课程">
                <el-select v-model="store.params.course_status" placeholder="课程状态">
                    <el-option key="1" label="未结束" value="1"></el-option>
                    <el-option key="2" label="已结束" value="2"></el-option>
                </el-select>
            </el-form-item>

            <templ slot="extra">
                <el-button size="small">导出</el-button>
                <el-button type="text" size="small">导出历史</el-button>
            </templ>
            <templ slot="actions">
                <el-button size="small">更多按钮</el-button>
            </templ>
        </ly-table-filter>
             </pre>
            </ly-code-view>


            <ly-markdown>
                <pre v-pre>

## `ly-table-filter`
------

#### Attributes

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |
|  background | 灰色背景框	  |boolean |-	|false	|
|  mb | margin-bottom	  |int.string |-|10	|
|  addText | 添加文字	  |string |-|添加	|

#### Event

| 名称  |说明   | 参数|
| ------------ | ------------ |------------ |
|  search | 查询按钮点击事件,不设置不显示查询按钮	  |- |
|  reset | 重置按钮点击事件,不设置不显示重置按钮	  |- |
|  add | 重置按钮点击事件,不设置不显示重置按钮	  |- |

#### slot 插槽

| 名称  |说明   |
| ------------ | ------------ |
|  default | 默认,筛选区 |
|  top | 顶部筛选区 |
|  actions |功能区  |
|  extra | 附加区  |

                </pre>
            </ly-markdown>


        </ly-page-content>
    </ly-page>
</template>
<script>
    //这里定义组件
    Rap.define([], function () {
        return {
            data: function () {
                var store = Ly.dataStore({
                    data: function () {
                        return [];
                    }
                });

                return {
                    store: store

                }
            }, created: function () {

            }, init: function (query) {

            },
            methods: {
                add:function (){

                }
            }
        }
    })
</script>